<template>
  <div>
    <el-card style="margin: 20px 0px">
      <CategorySelect @getCategoryInfo="getCategoryInfo" :isAddOrUpdate="isAddOrUpdate"></CategorySelect>
    </el-card>
    <el-card>
      <!-- 数据列表 -->
      <div v-if="!isAddOrUpdate">
        <el-button type="primary" icon="el-icon-plus" :disabled="!categoryForm.category3Id" round @click="addOrUpdateAttr">添加属性</el-button>
        <el-table style="width: 100%;" border :data="attrList">
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="150"></el-table-column>
          <el-table-column label="属性值列表">
           <template slot-scope="{ row, $index }">
              <el-tag type="success"  style="margin: 0px 10px" v-for="(attrValue, index ) in row.attrValueList" :key="attrValue.id">{{ attrValue.valueName }}</el-tag>
            </template> 
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="{ row, $index }">
              <el-button type="warning" icon="el-icon-edit" size="mini" @click="addOrUpdateAttr(row)" ></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 数据新新或修改 -->
      <div v-else>
        <el-form :inline="true" style="width: 90%" :model="attr">
              <el-form-item prop="attrName" label="属性名:" style="margin: 0px 15px">
                <el-input placeholder="请输入属性名称" v-model="attr.attrName"></el-input>  
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-plus" round @click="AddAttrValue">添加属性值</el-button>           
              </el-form-item>
        </el-form>

        <el-table border style="width: 100%; margin: 20px 0px"  :data="attr.attrValueList" >
          <el-table-column align="center" type="index" label="序号" width="80" ></el-table-column>    
          <el-table-column width="0"></el-table-column>
          <el-table-column width="width" prop="prop" label="属性值">
            <template slot-scope="{ row, $index }">
                <el-input  placeholder="请输入属性值名称" v-model="row.valueName" :ref="$index"  v-show="row.flag"
                  @blur="validatorAttVal(row)"  @keyup.native.enter="validatorAttVal(row)"></el-input>
                <span v-show="!row.flag" @click="toEdit(row, $index)"  style="display: block">{{ row.valueName }}</span>
             </template>            
          </el-table-column>
          <el-table-column  prop="prop" width="150" label="操作" >
            <template slot-scope="{ row, $index }">                    
              <el-button type="warning" icon="el-icon-edit" size="mini" @click="toEdit(row, $index)" style="margin: 0px 10px;"></el-button>
              <el-popconfirm  :title="`确定删除${row.valueName}?`" @onConfirm="delAttrVal($index)">
                <el-button type="danger" icon="el-icon-delete" size="mini"   slot="reference"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-button type="primary" round style="margin: 10px 5px;" @click="saveAttr">保&nbsp;&nbsp;存</el-button> 
        <el-button  round @click="isAddOrUpdate=false">取&nbsp;&nbsp;消</el-button> 
        
      </div>

    </el-card>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep"; //引入深拷贝
export default {
  name: "AttributeManager",
  data() {
    return {
      isAddOrUpdate:false,
      attrList: [],
      categoryForm: {
        category1Id: '',
        category2Id: '',
        category3Id: '',
      },
      attr:{
        id:undefined,
        attrName: "", 
        attrValueList:[],
        categoryId:'',
        categoryLevel: 3,
      }



    }
  },
  methods: {
    //获取分类的信息
    getCategoryInfo(val) {
      this.categoryForm = val;
      if (val.category3Id) {
        this.getAttrList();
      } else {
        this.attrList = [];
      }
    },
    //获取平台属性的数据
    async getAttrList() {
      const { category1Id, category2Id, category3Id } = this.categoryForm;
      const result = await this.$API.attr.reqAttrList(category1Id, category2Id, category3Id);
      if (result.code == 200) {
        this.attrList = result.data;
      }
    },
    //点击添加属性按钮
    addOrUpdateAttr(val){
      this.isAddOrUpdate=true;
      if(val.id){
        this.attr=cloneDeep(val);
        this.attr.attrValueList.forEach((item) => {
          this.$set(item, "flag", false);  //添加flag 属性，值为false, 并且是响应式属性
        })
      }else{
        this.attr.attrName='';
        this.attr.categoryId=this.categoryForm.category3Id;
        this.attr.attrValueList=[];
      }     
    },
    //添加属性值
    AddAttrValue(){
       this.attr.attrValueList.push({valueName:'', attrId: this.attr.id, flag:true})
       this.$nextTick(() => {
         this.$refs[this.attr.attrValueList.length - 1].focus(); //获取焦点
      });
    },

    //校验输入的属性值
    validatorAttVal(val){
      if(val.valueName.trim()==''){
         this.$message('请你输入一个正常的属性值');
         return;
       }
       let isRepat  = this.attr.attrValueList.some(item=>{
        if(val!==item){  //是否有相同的值
            return val.valueName==item.valueName;  
          }
       });
       if(isRepat){
        this.$message('不能输入相同的内容');
        return;
       }
       val.flag = false;
    }, 
    //点击后可以修改
    toEdit(row, index){
      row.flag = true;
      this.$nextTick(() => {       
        this.$refs[index].focus(); //修改的input获取焦点
      });
    },
    //删除属性值
    delAttrVal(index){
      this.attr.attrValueList.splice(index,1);
    },
    //保存属性
    async saveAttr(){
      this.attr.attrValueList = this.attr.attrValueList.filter(item=>{
        if(item.valueName!=''){
            //删除掉flag属性
            delete item.flag;   
            return true;         
          }
      });
      const result= await this.$API.attr.reqAddOrUpdateAttr(this.attr);
      if (result.code == 200) {
        this.$message({type:'success',message:'保存成功'});
        this.isAddOrUpdate=false;
        this.getAttrList();
      }

    },

  }
};
</script>

<style lang="scss" scoped></style>
